<template>
  <el-form :model="ruleForm" ref="ruleForm" :inline="false">
    <el-card class="box-card" shadow="never">
      <div slot="header" class="header-card" style="display: flex;justify-content: space-between;align-items: center">
        <span class="header-card-title"></span>
        <div>
          <el-button type="primary" @click="handleBatchExportTable">批量下载表格</el-button>
          <el-button type="primary" @click="handleBatchExportUpToStandard">批量下载合格证</el-button>
        </div>

      </div>

      <el-table :data="ruleForm.tableData" border>

        <el-table-column align="center" label="所属归属城市" prop="ascription" min-width="140"/>

        <el-table-column align="center" label="车牌号" prop="carNo" min-width="160"/>

        <el-table-column align="center" label="车架号" prop="vinNo" min-width="160"/>

        <el-table-column align="center" label="发动机号" prop="engineNo" min-width="160"/>

        <el-table-column align="center" label="车型" show-overflow-tooltip min-width="250">
          <template #default="{row}">
            {{ row.modelName ? '/' + row.modelName : '' }}
          </template>
        </el-table-column>

        <el-table-column align="center" label="座位数" min-width="100" prop="seatNumber"/>

        <el-table-column align="center" label="合计费用" show-overflow-tooltip min-width="120" prop="amountMoney">
          <template #default="{row,$index}">
            <span>{{ handleCount(row, $index) }}</span>
          </template>
        </el-table-column>

        <!--交强险-->
        <el-table-column label="交强险" align="center">
          <el-table-column align="center" label="保险公司" min-width="160" prop="jqxCompany"/>

          <el-table-column align="center" label="交强险起保日" min-width="140" prop="jqxExpectBeginTime">
            <template #default="{row}">
              <el-form-item class="formTable">
                <span>{{ row.jqxExpectBeginTime }}</span>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center" label="交强险到日" min-width="140" prop="jqxExpectEndTime">
            <template #default="{row}">
              <el-form-item class="formTable">
                <span>{{ row.jqxExpectEndTime }}</span>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center" label=" 性质" min-width="120">
            <template #default="{row}">
              <el-form-item class="formTable">
                <span>
                  {{ row.jqxInsuranceType == '1' ? '运营' : row.jqxInsuranceType == '2' ? '非运营' : '' }}
                </span>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center" label="交强险保费" min-width="180" prop="jqxAmount">
            <template #default="{row}">
              <el-form-item class="formTable">
                <span>{{ row.jqxAmount }}</span>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center" label="车船税是否缴纳" min-width="120">
            <template #default="{row}">
              <span v-if="row.carTaxStatus == '1' ">是</span>
              <span v-if="row.carTaxStatus == '2'">否</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="车船税费" min-width="160">
            <template #default="{row}">
              <el-form-item class="formTable">
                <span e>{{ row.carTax }}</span>
              </el-form-item>
            </template>
          </el-table-column>

        </el-table-column>

        <!--商业险-->
        <el-table-column label="商业险" align="center">
          <el-table-column align="center" label="保险公司" min-width="160" prop="syxCompany"/>

          <el-table-column align="center" label="商业险起保日" min-width="180" prop="syxExpectBeginTime">
            <template #default="{row}">
              <el-form-item class="formTable">
                <span>{{ row.syxExpectBeginTime }}</span>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center" label="商业险到日" min-width="180" prop="syxExpectEndTime">
            <template #default="{row}">
              <el-form-item class="formTable">
                <span>{{ row.syxExpectEndTime }}</span>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center" label=" 性质" min-width="120">
            <template #default="{row}">
              <el-form-item class="formTable">
                <span>
                  {{ row.syxInsuranceType == '1' ? '运营' : row.syxInsuranceType == '2' ? '非运营' : '' }}
                </span>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center" label="商业险保费" min-width="180" prop="syxAmount">
            <template #default="{row}">
              <el-form-item class="formTable">
                <span>{{ row.syxAmount }}</span>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table-column>

        <!--保险套餐-->
        <el-table-column label="保险套餐" align="center">
          <el-table-column align="center" label="车损险保额" width="180" prop="csxQuota"/>
          <el-table-column align="center" label="车损险保费" width="180" prop="csxPrice"/>

          <el-table-column align="center" label="三者险保额" width="180" prop="szxQuota"/>
          <el-table-column align="center" label="三者险保费" width="180" prop="szxPrice"/>

          <el-table-column align="center" label="乘客保险保额" width="180" prop="ckQuota"/>
          <el-table-column align="center" label="乘客保险保费" width="180" prop="ckPrice"/>

          <el-table-column align="center" label="驾驶员险额" width="180" prop="jsyQuota"/>
          <el-table-column align="center" label="驾驶员保险费" width="180" prop="jsyPrice"/>

          <el-table-column align="center" label="划痕险保额" width="180" prop="hhxQuota"/>
          <el-table-column align="center" label="划痕险保险费" width="180" prop="hhxPrice"/>

          <el-table-column align="center" label="增值服务特约险" width="180" prop="zzfwQuota"/>
          <el-table-column align="center" label="增值服务特约险保费" width="180" prop="zzfwPrice"/>

          <el-table-column align="center" label="车轮单独损失险" width="180" prop="clQuota"/>
          <el-table-column align="center" label="车轮单独损失险保费" width="180" prop="clPrice"/>

          <!--          <el-table-column align="center" label="外部电网附加险" width="180" prop="wbdwQuota"/>-->
          <!--          <el-table-column align="center" label="外部电网附加险保费" width="180" prop="wbdwPrice"/>-->

          <el-table-column align="center" label="其他险种备注" width="180" prop="qtQuota"/>
          <el-table-column align="center" label="其他险种保费" width="180" prop="qtPrice"/>
        </el-table-column>

        <!--其他险种-->
        <el-table-column label="其他险种" align="center">
          <el-table-column align="center" label="其他险备注" width="180" prop="otherInsuranceRemark"/>
          <el-table-column align="center" label="其他险种保费" width="180" prop="otherInsuranceSumAmount"/>
        </el-table-column>

      </el-table>

    </el-card>
  </el-form>
</template>

<script>
export default {
  name: "hojiApprove", //保司报价审批
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: "",
    },
  },
  computed: {
    ruleForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", {...target, [key]: value});
            return true;
          },
        });
        return proxy;
      },
    },
    isEdit() {
      let bool;
      switch (this.state) {
        case "write":
          bool = true;
          break;
        case "disabled":
          bool = false;
          break;
        case "readonly":
          bool = false;
          break;
      }
      return bool;
    },
  },
  watch: {},
  data() {
    return {};
  },
  created() {
  },
  mounted() {

  },
  methods: {
    handleCount(val, index) {
      let num = 0;
      num =
          Number(val.jqxAmount) +
          Number(val.carTax) +
          Number(val.csxPrice) +
          Number(val.szxPrice) +
          Number(val.ckPrice) +
          Number(val.jsyPrice) +
          Number(val.hhxPrice) +
          Number(val.zzfwPrice) +
          Number(val.qtPrice) +
          Number(val.otherInsuranceSumAmount)
      this.$set(this.value.tableData[index], 'amountMoney', num)
      return num;
    },

    handleBatchExportTable() {
      let ids = this.ruleForm.tableData.map((item) => item.carId);
      this.download_json(
          "/car/insurance/exportCarList",
          [...ids],
          `批量下载表格_${new Date().getTime()}.xlsx`
      );
    },
    handleBatchExportUpToStandard() {
      let ids = this.ruleForm.tableData.map((item) => item.qualifiedCardOss);
      ids.map((a) => {
        this.$download.oss(a);
      });
    },
  },
};
</script>

<style scoped lang="scss">
.el-form {
  ::v-deep.formTable {
    margin-bottom: 0;
  }
}

.box-card {
  font-size: 14px;
  margin-bottom: 16px;
}

::v-deep .header-class {
  .cell::before {
    content: "*";
    color: red;
    padding-right: 2px;
    font-size: 14px;
  }
}
</style>


